<template>
  <div>
    <div class="titleArea">
      <div class="titleArea-label"></div>
      <div class="titleArea-content">通用模态框配置</div>
    </div>
    <a-steps class="stepsArea" :current="current" @change="stepChange">
      <a-step title="配置数据表" description="选择申请表与企业表关联，进行字段配置" />
      <a-step title="模态框主体" description="选择主体字段与中文名称" />
    </a-steps>
    <div class="contentArea">
      <div v-show="current == 0">
        <RelationTable
          ref="RelationGeneral"
          :configItemList="generalItemList"
          :f_congfigMap="$store.state.com_config.originalObj['GENERAL'] || null"
        />
      </div>
      <div v-show="current == 1">
        <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="主体字段" required>
          <SearchField ref="SearchFieldRef" @f_setField="s_setField" :value="generalConfig.primarykey" />
        </a-form-model-item>
        <a-form-model-item :label-col="labelCol" :wrapper-col="wrapperCol" label="主体名称" required>
          <a-input allow-clear v-model="generalConfig.subject" :maxLength="10" placeholder="请输入主体名称" />
        </a-form-model-item>
      </div>
    </div>

    <!-- json组件 -->
    <ShowJson ref="showJsonRef" />

    <div class="btnBox">
      <a-popconfirm class="plusBox" title="确定重置吗？" ok-text="是" cancel-text="否" @confirm="reset()">
        <a-button :style="{ marginRight: '8px' }" icon="rollback"> 重置 </a-button>
      </a-popconfirm>
      <a-button @click="configSave()" type="primary" :style="{ marginRight: '8px' }" icon="save">
        {{ current == 0 ? '下一步' : '保存' }}
      </a-button>
      <a-button @click="showJson()" type="primary" :style="{ marginRight: '8px' }" icon="save"> json </a-button>
    </div>
  </div>
</template>
<script>
import { DATA_BASE_SFAPPROVE } from '@/store/mutation-types.js'
import { analysisData } from '@/utils/component/parseData.js'
export default {
  data() {
    return {
      labelCol: { span: 4 }, // label宽
      wrapperCol: { span: 18 }, // 组件宽
      confingInfo: {
        step1: false,
        setp2: false,
      },

      generalConfig: this.$store.state.com_config.analysisObj.generalConfig, // 配置对象
      generalTemp: {
        apltable: '', // 申请表
        enttable: '', // 企业表
        subject: '', // 主体名称
        primarykey: '', // 主体字段
        span: 2, // 一行多少个
        fill_item: [], // 渲染项
        rules: {}, // 校验规则
        paragraph: {}, // 小标题
        expression: {}, // 响应式
        filter: {}, // 过滤条件
      },
      generalItemList: [{ title: '通用组件', key: 'GENERAL', isConfigurItem: false }], // 通用配置项
      current: 0,
    }
  },
  created() {
    // 如果从未配置过初始化
    if (JSON.stringify(this.generalConfig) == '{}') {
      this.dataInit()
    } else {
      for (let v of this.generalItemList) {
        if (this.$store.getters.getOriginalObj(v.key) != null) {
          v.isConfigurItem = true
        }
      }
    }
    // this.$store.state.com_config.analysisObj.generalConfig = {}
    console.log('this.generalConfig', this.$store.state.com_config.analysisObj.generalConfig)
  },
  methods: {
    // 重置配置项
    reset() {
      let key = this.$refs.RelationGeneral.f_reset()
      // 置为未配置
      for (let v of this.generalItemList) {
        if (v.key == key) {
          v.isConfigurItem = false
          break
        }
      }
      this.generalConfig.apltable = null
      this.$store.commit('setAnalysisObj', ['generalConfig', this.generalConfig])
      this.$store.commit('setOriginalObj', ['GENERAL', null])
      console.log('this.generalConfig', this.generalConfig)
    },
    // 显示json弹框
    showJson() {
      this.$refs.showJsonRef.init(this.generalConfig)
    },
    // 数据初始化
    dataInit() {
      for (let key in this.generalTemp) {
        this.generalConfig[key] = this.generalTemp[key]
      }
    },
    // 搜索字段组件回显
    s_setField(value) {
      console.log('主体字段', value)
      this.generalConfig.primarykey = value
    },
    // 获取组装子组件所有配置
    configSave() {
      if (this.current == 0) {
        this.step1Save()
      } else if (this.current == 1) {
        this.step2Save()
      }
    },
    // 步骤二保存
    step2Save() {
      if (!this.generalConfig.primarykey) {
        this.$message.warning('请选择主体字段')
        ReadableStreamDefaultController
      }
      if (!this.generalConfig.subject) {
        this.$message.warning('请填写主体名称')
        return
      }
      // 调用接口存储到数据库 todu
      this.$message.success('保存成功')
      this.$store.commit('setAnalysisObj', ['generalConfig', this.generalConfig])
      console.log('保存成功', this.generalConfig, this.$store.state.com_config.analysisObj.generalConfig)
    },
    // 步骤一保存
    step1Save() {
      let g_check = this.$refs.RelationGeneral.f_getConfig()
      if (g_check.status) {
        console.log('通用组件配置成功', g_check)
        // 1. 把步骤一的配置改为已完成
        this.confingInfo.step1 = true
        // 存储vuex里的原始对象
        this.$store.commit('setOriginalObj', [g_check.key, g_check.value])
        // console.log('Vuex',  this.$store.state.com_config)
        // 2. 按格式组装通用配置对象
        this.assemblyProperties(g_check.value)
        // 3. 自动往下走一步
        this.current = 1
        this.$nextTick(() => {
          this.$refs.SearchFieldRef.f_init(DATA_BASE_SFAPPROVE, this.generalConfig.apltable)
        })
      } else {
        console.warn('通用组件配置失败', g_check)
      }
    },
    // 组装通用对象配置
    assemblyProperties(confingValue) {
      // this.dataInit()
      // 数据解析
      let result = analysisData(confingValue)
      if (result.status) {
        for (let key in result.value) {
          this.generalConfig[key] = result.value[key]
        }
      }
      console.log('通用模态框配置好了', this.generalConfig)
    },
    // 递归, 按两个一组
    recursion_splice(span, spanArr, tempArr) {
      if (spanArr.length > span) {
        tempArr.push(spanArr.splice(0, span))
        if (spanArr.length > span) {
          recursion_splice(span, spanArr, tempArr)
        } else {
          if (spanArr.length > 0) {
            tempArr.push(spanArr)
          }
          return
        }
      } else {
        tempArr.push(spanArr)
      }
    },
    // 步骤条修改
    stepChange(value) {
      if (value == 1 && this.confingInfo.step1 == false) {
        this.$message.warning('请先完成步骤一')
        return
      }
      this.current = value
    },
  },
  components: {
    RelationTable: () => import('@/views/businessAssembly/public/relationTable.vue'),
    SearchField: () => import('@/views/businessAssembly/public/spareparts/searchField.vue'),
    ShowJson: () => import('@/views/businessAssembly/public/spareparts/showJson.vue'),
  },
}
</script>

<style lang="less" scoped>
</style>
